<template>
    <el-container>
      <el-aside width="200px">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu default-active="2" class="el-menu-vertical-demo" style="border: none; width: 200px;"
            @open="handleOpen" @close="handleClose"
              >
              <el-sub-menu index="1" style="margin-bottom: 50px;" @click="() => router.push({ path: '/setup' })">
                <template #title>
                  <el-icon><HomeFilled /></el-icon>
                  <span>Overview</span>
                </template>
                <el-menu-item index="2-1">/project/filepath_resultB</el-menu-item>
                <el-menu-item index="2-2">/project/filepath_resultC</el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>STA ANALYSIS</el-header>
        <el-main class="main" style="min-width: 760px;">
          <section>
            <router-view v-slot="{ Component }">
              <transition name="slide-fade" mode="out-in">
                <div :key="route.path">
                  <component :is="Component"></component>
                </div>
              </transition>
            </router-view>
          </section>
        </el-main>
      </el-container>
    </el-container>
  </template>
  <script setup>
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'
  import { useRouter, useRoute } from 'vue-router';
  const router = useRouter();
  const route = useRoute();
  const handleOpen = (key, keyPath) => {
    console.log(route.path)
  }
  const handleClose = (key, keyPath) => {
  }
  </script>
  <style scoped>
  .el-header,
  .el-footer {
    /* background-color: #B3C0D1; */
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
    text-align: left;
    width: 200px;
  }
  
  .el-main {
    /* background-color: #E9EEF3; */
    color: #333;
    text-align: center;
  }
  
  .slide-fade-enter-active {
    transition: all 0.3s ease-out;
  }
  
  .slide-fade-leave-active {
    transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
  }
  
  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
  }
  </style>